<template>
    <div :style="{ height: height, width: width }" id="map" class="map"></div>
</template>

<script>
import markerRed from "@/assets/images/map/marker-icon/camera32.png";
import { detailsInfo, listWarn } from "@/api/combatUser/alarmInformation";

export default {
    props: {
        height: {
            type: String,
            default: "1000px",
        },
        width: {
            type: String,
            default: "100%",
        },
        center: {
            type: Object,
            //台湾  台中市
            default: () => ({ lng: 120.25892022454639, lat: 24.195578777484076 }),
        },
        zoom: {
            type: Number,
            default: 10,
        },
        enableScrollWheelZoom: {
            type: Boolean,
            default: true,
        },
        nightMode: {
            type: Boolean,
            default: true,
        },
        markers: {
            type: Array,
            default: () => [
                {
                    lng: 121.509062,
                    lat: 25.044332,
                    color: "yellow",
                    params: { name: "摄像头地址" },
                },
            ],
        },
    },
    data() {
        return {
            pointInfo: [],
            map: null,
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            const map = new BMap.Map("map"); // 创建地图实例
            const point = new BMap.Point(this.center.lng, this.center.lat); // 创建点坐标
            map.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(this.enableScrollWheelZoom); // 开启鼠标滚轮缩放
            // map.setMapStyle({ style: 'midnight' });
            this.map = map;
        },
        //从外部传进来的数据 进行标点
        setData(data) {
            console.log("百度地图datadatadata", data);
            this.pointInfo = data.points;
            this.addMarkersPoint();
        },
        //标点的具体实现
        addMarkersPoint() {
            this.pointInfo.forEach((markerData) => {
                console.log(markerData);
                const point = new BMap.Point(markerData.lng, markerData.lat);
                // Create a custom icon
                let img = ''
                switch (markerData.color) {
                    case "red":
                        img = require("@/assets/xd/userPositioningRed.png");
                        break;
                    case "blue":
                        img = require("@/assets/xd/userPositioningGreen.png");
                        break;
                    case "yellow":
                        img = require("@/assets/xd/userPositioningYellow.png");
                        break;
                    default:
                        img = require("@/assets/xd/location4.png");
                        break;
                }
                const icon = new BMap.Icon(img, new BMap.Size(100, 100)); // Adjust size as needed
                icon.setImageSize(new BMap.Size(80, 80));

                // Create a marker with the custom icon
                const marker = new BMap.Marker(point, { icon: icon });

                this.map.addOverlay(marker); // 将标注添加到地图中
                // 创建文本标注对象
                var label = new BMap.Label(markerData.params.name, {
                    // 设置文本偏移量
                    offset: new BMap.Size(16, 5)
                });
                // 自定义文本标注样式
                label.setStyle({
                    background: 'none',
                    color: '#fff',
                    border: 'none'
                });
                // 显示在标记点
                marker.setLabel(label);


                const content = `<div>
                <h4 class="BMap_title">预警信息</h4>
                <p class="BMap_content">定位地点: ${markerData.params.locationLeak}</p>
                <p class="BMap_content">经纬度: (${markerData.params.locationLon}, ${markerData.params.locationLat})</p>
                <p class="BMap_content1">泄露地点: <span>${markerData.params.locationPos}</span></p>
                <button class="BMap_btn" type="button" id="markerClick" data-id="${markerData.params.id}">抗定位</button>
              </div>`;
                if (markerData.params.name == '泄露地址') {
                    this.addClickHandler(content, marker);
                }
            });
        },
        addClickHandler(content, marker) {
            marker.addEventListener("click", (e) => {
                this.openInfo(content, e);
            });
        },
        openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象
            this.map.openInfoWindow(infoWindow, point); //开启信息窗口
            //判断窗口的打开状态
            if (!infoWindow.isOpen()) {
                //如果没有打开，则监听打开事件，获取按钮，添加事件
                infoWindow.addEventListener("open", () => {
                    document.getElementById("markerClick").onclick = (e) => {
                        console.log("点击", e.target.dataset.id);
                        detailsInfo(e.target.dataset.id).then(res => {
                            if (res.code == 200) {
                                this.$emit('markerClick', res.data);
                            }
                        })
                    };


                });
            } else {
                //如果已经打开，直接获取按钮，添加事件
                document.getElementById("markerClick").onclick = (e) => {
                    console.log("点击", e.target.dataset.id);
                    this.$emit('markerClick', {});
                };
            }
        },

        toantiLocalizationdetail(id) {
            this.$router.push(`/positionAnalysis/cameraManagementD?id=${id}`);
        },
        videoInfo(id) {
            this.pointInfo.forEach((item) => {
                if (item.id == id) {
                    window.open(item.cameraViewurl, "_blank", "width=600,height=400");
                }
            });
        },
        //坐标转换
        convertCoordinates(lng, lat) {
            // Example of a coordinate conversion method
            // This is a placeholder for actual conversion logic
            return { lng: lng + 0.1, lat: lat + 0.1 };
        },
        setCenter(lng, lat) {
            const point = new BMap.Point(lng, lat);
            this.map.centerAndZoom(point, this.zoom);
        },
    },
};
</script>

<style>
.map {
    width: 100%;
    height: 500px;
}

/*地图标题 infoWindow*/
.BMap_bubble_title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;
}

.BMap_pop .BMap_top {
    background: #1f4f86b5 !important;
    border: 0 !important;
}

.BMap_pop .BMap_center {
    /* width: 281px !important;s */
    border: 0 !important;
    background: #1f4f86b5 !important;
}

.BMap_pop .BMap_bottom {
    border: 0 !important;
    background: #1f4f86b5 !important;
}

.BMap_title {
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;
    display: flex;
    justify-content: center;
}

.BMap_content {
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;
}

.BMap_content1 {
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    background: transparent !important;

    span {
        color: red;
    }
}

.BMap_btn {}

.BMap_pop div:nth-child(3) {
    background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
    border-radius: 3px;
    background: #1f4f86b5 !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) {
    border-radius: 3px 0 0 0;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(1) div {
    background: #1f4f86b5 !important;
}

.BMap_pop div:nth-child(5) {
    border-radius: 0 0 0 3px;
    background: transparent !important;
    border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
    border-radius: 3px;
    background: #1f4f86b5 !important;
}

.BMap_pop div:nth-child(7) {
    background: transparent !important;
    left: 226px;
}

.BMap_pop div:nth-child(7) div {
    border-radius: 3px;
    background: #1f4f86b5 !important;
}

/*替换箭头*/
/* img[src="http://api0.map.bdimg.com/images/iw3.png"] {
      content: url('../images/iw3.png');
  }
  
  img[src="https://api.map.baidu.com/images/iw3.png"] {
      opacity: 0.7;
      margin-top: -692px !important;
      filter: alpha(opacity=70);
      content: url('../images/iw3.png');
  } */
</style>